<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽的使用</title>
</head>
<body>

<div id="app">
    <html-a v-bind:text="message"></html-a>
    <html-a v-bind:text="message">@@@@</html-a>
    <html-a v-bind:text="message">####</html-a>
    <html-a v-bind:text="message">!!!!</html-a>
    <html-a v-bind:text="message"></html-a>
    <html-a v-bind:text="message"></html-a>
    <html-a v-bind:text="message"></html-a>
</div>

<template id="html-a">
    <div>
        <span>{{text}}</span>
        <slot>****</slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //创建一个Vue对象
    //父组件
    const app = new Vue({
        el : '#app',
        data : {
            message : 'Hello, Vue!'
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        name : 'Mr.Lee'
                    }
                },
                template : '#html-a',
                props : ['text']
            }
        },

        //计算属性，固定名称
        computed : {

        },

        //方法
        methods : {

        }
    });










</script>
</body>
</html>
